window.addEventListener('load', function() {
    let focus = this.document.querySelector('.focus');
    let arrowL = this.document.querySelector('.arrow-l');
    let arrowR = this.document.querySelector('.arrow-r');
    let ul = focus.children[2];
    let lis = ul.children;
    let first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    let width = first.offsetWidth;
    let timer =setInterval(() => {
        arrowR.click();
    }, 1000);
    focus.addEventListener('mouseover', function() {
        arrowL.style.display = 'block';
        arrowR.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })
    focus.addEventListener('mouseout', function() {
        arrowL.style.display = 'none';
        arrowR.style.display = 'none';
        timer =setInterval(() => {
            //console.log('i');
            arrowR.click();
        }, 1000);
    })
    let i = 0;
    let circles = this.document.querySelector('.circle');
    for(let i = 0;i<= lis.length-2;i++){
        let li = this.document.createElement('li');
        //li.setAttribute('index',i);
        circles.appendChild(li);
    }

    let cheachCirle = ()=>{
        for(let j = 0;j<circles.children.length;j++){
                circles.children[j].classList.remove('current');
            }
            circles.children[i==circles.children.length?0:i].classList.add('current');
    }
    cheachCirle();
    arrowR.addEventListener('click', function() {
        if (i == lis.length - 1) {
            i = 0;
            ul.style.left = (-i * width) + 'px';
        }
        i++;
        animate(ul, -i * width);
        cheachCirle();
    })
    arrowL.addEventListener('click', function() {
        i--;
        if (i == -1) {
            i = lis.length - 1;
            ul.style.left = (-i * width) + 'px';
            i--;
        }
        animate(ul, -i * width);
        cheachCirle();
    })
    
    for(let j = 0;j<circles.children.length;j++){
        circles.children[j].addEventListener('click',function(){
            for(let i = 0;i<circles.children.length;i++){
                circles.children[i].classList.remove('current');
            }
            circles.children[j].classList.add('current');
            i = j
            animate(ul, -i * width);
        })        
            
    }
})